<template>
  <div id="box">
    <div class="small">
      <div class="small-top">
        <el-button class="adds" @click="showadd" type="primary">+添加</el-button>
      </div>
      <div class="small-bottom">
        <el-table :data="viplvs" style="width: 100%">
          <el-table-column prop="vipName" label="会员名称" width="297" />
          <el-table-column prop="disCount" label="会员折扣" width="297" />
          <el-table-column prop="vipPoints" label="所需积分" width="297" />
          <el-table-column label="操作" width="297">
            <template #default="scope">
              <button class="btn2" @click="showrevamp(scope.row)">修改</button>
              <button class="btn3" @click="deleteLv(scope.row)">删除</button>
            </template>
          </el-table-column>
        </el-table>
        <div class="foot">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSize"
            :page-count="total"
            @current-change="pageChange" />
        </div>
        <!-- 删除模态框 -->
        <el-dialog class="mask1" v-model="delmask" title="删除" width="500" style="font-weight: 600;" center
          :show-close="false">
          <span class="spn1">
            您确定删除此条信息吗？
          </span>
          <template #footer>
            <div class="dialog-footer">
              <el-button class="btns" @click="save">保 存</el-button>
              <el-button class="btnss" @click="cancel">
                取 消
              </el-button>
            </div>
          </template>
        </el-dialog>

        <!-- 添加模态框 -->
        <el-dialog class="mask2" v-model="addmask" title="添加会员等级" width="500" style="font-weight: 600;" center
          :show-close="false">
          <div class="di1">
            <span class="san1">会员名称：</span>
            <input class="inp" type="text" placeholder="请输入会员名称" v-model="inp">
          </div>
          <div class="di2">
            <span class="san1">会员折扣：</span>
            <input class="inp1" type="text" placeholder="请输入会员折扣" v-model="inp1">
          </div>
          <div class="di3">
            <span class="san1">所需积分：</span>
            <input class="inp2" type="text" placeholder="请输入所需积分" v-model="inp2">
          </div>
          <div class="di4">
            <span class="san1">等级：</span>
            <select name="" id="sell"   v-model="inp3">
              <option value="" disabled>请选择等级</option>
              <!-- 使用 v-for 循环填充选项 -->
              <option v-for="item in selectOptions" :key="item.lvRuleId"  :value="item.lvRuleId">{{ item.lvRuleId }}</option>
            </select>
          </div>
          <template #footer>
            <div class="dialog-footer1">
              <el-button class="btns1" @click="addlv">保 存</el-button>
              <el-button class="btnss1" @click="cancels">
                取 消
              </el-button>
            </div>
          </template>
        </el-dialog>

        <!-- 修改模态框 -->
        <el-dialog class="mask3" v-model="modify" title="修改会员" width="500" style="font-weight: 600;" center
          :show-close="false">
          <div class="di1">
            <span class="san1">会员名称：</span>
            <input class="inp" type="text" placeholder="请输入会员名称" v-model="inp4">
          </div>
          <div class="di2">
            <span class="san1">会员折扣：</span>
            <select name="" id="sell1"   v-model="inp5">
              <option value="请选择折扣" disabled>请选择折扣</option>
              <option value="0.1">0.1</option>
              <option value="0.2">0.2</option>
              <option value="0.3">0.3</option>
              <option value="0.4">0.4</option>
              <option value="0.5">0.5</option>
              <option value="0.6">0.6</option>
              <option value="0.7">0.7</option>
              <option value="0.8">0.8</option>
              <option value="0.9">0.9</option>
            </select>
          </div>
          <div class="di3">
            <span class="san1">所需积分：</span>
            <input class="inp2" type="text" placeholder="请输入所需积分" v-model="inp6">
          </div>
          <template #footer>
            <div class="dialog-footer1">
              <el-button class="btns1" @click="modificationlv">保 存</el-button>
              <el-button class="btnss1" @click="canceles">
                取 消
              </el-button>
            </div>
          </template>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script setup>
import { Check, Delete, Edit, Message, Search, Star } from '@element-plus/icons-vue';
import axios from 'axios';
import { onMounted, ref } from 'vue';

// 分页
let pageSize = 11;
let currentPage = ref(1);
let total = ref(1);
const pageChange = (newPage) => {
  currentPage.value = newPage;
  viplv();
  selectlv();
};
onMounted(() => {
  viplv();
  selectlv();
});

// 调接口
var viplvs = ref([]);
var viplv = function () {
  axios.defaults.headers.common['token'] = localStorage.getItem("token");
  axios.post("http://192.168.199.11:8001/ShoppingStreet/vipLv/vipLvList", {
    pageIndex: currentPage.value,
    pageSize: pageSize
  }).then((res) => {
    console.log(res);
    viplvs.value = res.data.data.vipLvs;
    total.value = res.data.data.pageCount;
  });
};

// 删除接口
var delmask = ref(false);
var deletingRow = null;
var deleteLv = function (row) {
  delmask.value = true;
  deletingRow = row;
};
var cancel = function () {
  delmask.value = false;
};
var save = function (row) {
  axios.defaults.headers.common['token'] = localStorage.getItem("token");
  const updatedRow = {...row, delflag: 1 };
  axios.post("http://192.168.199.11:8001/ShoppingStreet/vipLv/deleteVipLv", {
    lvId: deletingRow.lvId,
    delflag: updatedRow.delflag
  }).then((res) => {
    console.log(res);
    viplv();
    cancel();
  });
};

// 添加接口
var addmask = ref(false);
var showadd = function () {
  addmask.value = true;
};
var cancels = function () {
  addmask.value = false;
};
let inp = ref('');
let inp1 = ref('');
let inp2 = ref('');
let inp3 = ref('');
var addlv = function () {
  console.log(inp3.value)
  axios.defaults.headers.common['token'] = localStorage.getItem("token");
  axios.post("http://192.168.199.11:8001/ShoppingStreet/vipLv/addVipLv", {
    vipName: inp.value,
    disCount: inp1.value,
    vipPoints: inp2.value,
    lvRuleId:inp3.value,
    
    // lvRuleId:
  }).then((res) => {
    console.log(res);
    viplv();
    cancels();
    location.reload();
    // selectOptions = res.data.data
  });
};

// 下拉列表接口
let selectOptions = ref([]);
// let selectedOptions = []; // 存储已选择的选项
var selectlv = function () {
  axios.defaults.headers.common['token'] = localStorage.getItem("token");
  axios.post("http://192.168.199.11:8001/ShoppingStreet/vipLv/addVipList", null).then((res) => {
    // 将接口返回的数据转换为适合下拉列表的格式
    selectOptions.value = res.data.data;
    
  });
};

// 修改接口
var modify = ref(false);
var inp4 = ref('');
var inp5 = ref('');
var inp6 = ref('');
var lvid = ref('');
var showrevamp = function (row) {
  modify.value = true;
  lvid.value = row.lvId;
  inp4.value = row.vipName;
  inp5.value = row.discount;
  inp6.value = row.vipPoints;
};
var canceles = function () {
  modify.value = false;
  // 清空输入框
  inp4.value = '';
  inp5.value = '';
  inp6.value = '';
};

var modificationlv = function () {
  axios.defaults.headers.common['token'] = localStorage.getItem("token");
  axios.post("http://192.168.199.11:8001/ShoppingStreet/vipLv/updateVipLv", {
    lvId: lvid.value,
    vipName: inp4.value,
    discount: Number(inp5.value),
    vipPoints: Number(inp6.value)
  }).then((res) => {
    console.log(res);
    viplv();
    modify.value = false;
    // 清空输入框
    inp4.value = '';
    inp5.value = '';
    inp6.value = '';
  });
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}

#box {
  width: 100%;
  height: 100%;
  background-color: #F5F5F5;
}

.small {
  width: 90%;
  height: 90%;
  margin: 0 auto;
  box-sizing: border-box;
  padding-top: 15px;
}

.small-top {
  width: 100%;
  height: 10%;
  box-sizing: border-box;
  line-height: 100px;
}

.adds {
  float: right;
  width: 10%;
  height: 70%;
  background-color: #5981E1;
  margin-top: 10px;
}

.small-bottom {
  width: 100%;
  height: 95%;
  background-color: #fff;
  margin-top: 15px;
}

.el-table--fit {
  width: 100%;
  height: 100%;
}

.el-table {
  --el-table-border-color: none;
  --el-table-border: 0px solid var(--el-table-border-color);
}

:deep(.cell) {
  text-align: center;
  color: #000;
  border: none;
}

.foot {
  width: 77%;
  height: 10%;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 41px;
}

.el-pagination {
  justify-content: center;
}

.sel {
  border: none;
  outline: none;
  font-weight: 600;
}

.btn2 {
  width: 20%;
  height: 6%;
  font-size: 13px;
  border: none;
  background-color: transparent;
  color: #3AE000;
}

.btn3 {
  width: 20%;
  height: 6%;
  font-size: 13px;
  border: none;
  margin-right: 7px;
  background-color: transparent;
  color: #E00026;
}

:deep(.mask1) {
  --el-dialog-margin-top: 17%;
  --el-dialog-border-radius: none;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 25%;
  height: 30%;
}

.spn1 {
  display: inline-block;
  width: 100%;
  margin-top: 20%;
  font-weight: 500;
}

:deep(.el-dialog__footer) {
  width: 100%;
  height: 60%;
}

.dialog-footer {
  width: 100%;
  height: 60%;
  margin-top: 10%;
  display: flex;
  justify-content: space-evenly;
}

.btns {
  width: 25%;
  height: 60%;
  text-align: center;
  line-height: 10px;
  background-color: #5981E1;
  color: #fff;
  font-weight: 600;
}

.btnss {
  width: 25%;
  height: 60%;
  text-align: center;
  line-height: 10px;
  background-color: #BFBFBF;
  color: #fff;
  font-weight: 600;
}

:deep(.mask2) {
  width: 25%;
  height: 45%;
  --el-dialog-margin-top: 13%;
  --el-dialog-border-radius: none;
  /* display: flex;
  align-items: center;
  flex-direction: column; */
}

.san1 {
  font-weight: 500;
  color: #000;
}

input::placeholder {
  color: #d8d8d8;
}

.di1 {
  width: 90%;
  height: 35px;
  margin-left: 10%;
  margin-top: 3%;
}

.inp {
  width: 58%;
  height: 80%;
  background-color: #F4F4F4;
  border: none;
  border-radius: 2px;
  box-sizing: border-box;
  padding-left: 7px;
}

.di2 {
  width: 90%;
  height: 35px;
  margin-left: 10%;
  margin-top: 3%;
}

.inp1 {
  width: 58%;
  height: 80%;
  background-color: #F4F4F4;
  border: none;
  border-radius: 2px;
  box-sizing: border-box;
  padding-left: 7px;
}

.di3 {
  width: 90%;
  height: 35px;
  margin-left: 10%;
  margin-top: 3%;
}

.inp2 {
  width: 58%;
  height: 80%;
  background-color: #F4F4F4;
  box-sizing: border-box;
  border: none;
  border-radius: 2px;
  padding-left: 7px;
}

.di4 {
  width: 85%;
  height: 35px;
  margin-left: 18%;
  margin-top: 3%;
}

#sell {
  width: 61%;
  height: 80%;
  background-color: #F4F4F4;
  border: none;
  border-radius: 2px;
  padding-left: 7px;
  color: #D8D8D8;
}

.dialog-footer1 {
  width: 100%;
  height: 60%;
  margin-top: 2%;
  display: flex;
  justify-content: space-evenly;
}

.btns1 {
  width: 25%;
  height: 40%;
  text-align: center;
  line-height: 10px;
  background-color: #5981E1;
  color: #fff;
  font-weight: 600;
}

.btnss1 {
  width: 25%;
  height: 40%;
  text-align: center;
  line-height: 10px;
  background-color: #BFBFBF;
  color: #fff;
  font-weight: 600;
}

:deep(.mask3) {
  width: 25%;
  height: 40%;
  --el-dialog-margin-top: 14%;
  --el-dialog-border-radius: none;
  /* display: flex;
  align-items: center;
  flex-direction: column; */
}
#sell1 {
  width: 58%;
  height: 80%;
  background-color: #F4F4F4;
  border: none;
  border-radius: 2px;
  padding-left: 7px;
  color: #D8D8D8;
}
input{
  outline: none;
}
</style>